<template>
  <slot />
  <template v-for="item in popups">
    <ElDialog v-if="item.type === 'dialog'" v-model="item.open" v-bind="item.props">
      <component :is="item.content" />
    </ElDialog>
  </template>
</template>

<script setup>
import { provide, shallowRef } from 'vue';
import { ElDialog } from 'element-plus';
import System from './system';

const popups = shallowRef([]);

const props = defineProps({
  max: Number,
  container: Object,
  eventEmitter: Object,
  defaultType: String,
  defaultProps: Object,
  zIndexMin: Number,
  zIndexMax: Number,
  onOpenOverflow: Function,
});

const popupStore = new System({
  ...props,
  update: () => {
    popups.value = Array.from(popupStore.popupList).map(([_, item]) => item);
    console.log(popups.value);
  },
});

const popupInstance = {
  popupStore: popupStore,
  namespace: popupStore.namespace,
  setNamespace: popupStore.setNamespace.bind(popupStore),
  task: popupStore.getCreatedList(),
  register: popupStore.register.bind(popupStore),
  unregister: popupStore.unregister.bind(popupStore),
  setProps: popupStore.setProps.bind(popupStore),
  open: popupStore.open.bind(popupStore),
  hide: popupStore.hide.bind(popupStore),
  close: popupStore.close.bind(popupStore),
  toggle: popupStore.toggle.bind(popupStore),
  destroy: popupStore.destroy.bind(popupStore),
  focus: popupStore.focus.bind(popupStore),
};

// console.log(popupStore);

provide('PopupContext', {
  enable: true,
  ...popupInstance,
});
</script>
